/* pages/userLogin/index.wxss */
.userLogin {
  .page-content {
    .top {
      position: relative;

      .top-bg {
        width: 100%;
        height: 348rpx;
      }

      .top-title {
        position: absolute;
        left: 0;
        width: 100%;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;

        // border:1px solid red;
        .back {
          position: absolute;
          left: 40rpx;
        }
      }

      .top-logo {
        position: absolute;
        width: 511rpx;
        height: 95rpx;
        bottom: 56rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .bottom {
      padding-top: 66rpx;

      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #0098FE;

        .hline {
          width: 96rpx;
          height: 4rpx;
          background: #009DFF;

          &.left {
            margin-right: 15rpx;
          }

          &.right {
            margin-left: 15rpx;
          }
        }
      }

      .form {
        padding: 60rpx 0;
        width: 550rpx;
        margin: 0 auto;

        .form-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #dfdfdf;
          padding: 4rpx 0;

          +.form-item {
            margin-top: 34rpx;
          }

          .left {
            font-size: 30rpx;
            font-weight: 500;
            color: #333333;

            .required {
              color: #FF6326;
              margin-left: 6rpx;
            }
          }

          .right {
            display: flex;
            align-items: center;

            .picker {
              display: flex;
              align-items: center;

              .picker-content {
                display: flex;
                align-items: center;
              }
            }

            .input-wrapper {
              margin-right: 12rpx;
              // border: 1px solid red;

              .input {
                text-align: right;
              }
            }

            .icon-arrow {
              width: 19rpx;
              height: 30rpx;
            }

            .icon-geo {
              width: 26rpx;
              height: 32rpx;
            }

            .icon-area {
              width: 26rpx;
              height: 26rpx;
              transform: scale(1.35);
            }
          }
        }
      }

      .btn-check {
        display: block;
        margin: 10rpx auto 0 auto;
        width: 550rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #009DFF;
        border-radius: 10rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #F5F5F5;

        +.btn-check {
          margin-top: 30rpx;
        }
      }

    }
  }
}